<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<script src="js/jquery-3.7.1.js"></script>
<body>
<h1 align="center">商品信息</h1>
<table id="tb1" align="center" cellpadding="0" cellspacing="0" border="1" width="1200">
    <thead>
    <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品类型</th>
        <th>单价</th>
        <th>库存</th>
        <th>商品图片</th>
        <th>上架日期</th>
        <th>描述</th>
        <th>销量</th>
        <th>是否上架</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<h3 id="title" align="center">产品添加</h3>
<table id="tb2" align="center" style="border: 1px black solid;">
    <tr>
        <td>产品编号:</td>
        <td><input type="text" id="product_id" name="product_id" required></td>
    </tr>
    <tr>
        <td>产品名称:</td>
        <td><input type="text" id="product_name" name="product_name" required></td>
    </tr>
    <tr>
        <td>产品类型:</td>
        <td>
            <select id="sel">
                <option disabled selected>-请选择类型-</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>单价:</td>
        <td><input type="number" id="product_price" required></td>
    </tr>
    <tr>
        <td>库存:</td>
        <td><input type="number" id="product_count" required></td>
    </tr>
    <tr>
        <td>产品图片:</td>
        <td><input type="text" id="product_image"></td>
    </tr>
    <tr>
        <td>上架日期:</td>
        <td><input type="date" id="product_date" required></td>
    </tr>
    <tr>
        <td>描述:</td>
        <td><textarea id="product_desc"></textarea></td>
    </tr>
    <tr>
        <td>销量:</td>
        <td><input type="number" id="product_sale" required></td>
    </tr>
    <tr>
        <td>是否上架:</td>
        <td>
            <input type="radio" name="product_status" id="yes" checked>是
            <input type="radio" name="product_status" id="no">否
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <button type="button" id="btnAddUpdate">添加</button>
        </td>
    </tr>
</table>
<script>
    /**
     * 加载所有商品信息
     */
    function loadProduct() {
        $.ajax("load.do", {
            type: "post",
            dataType: "json",
            success: function (list) {
                $("#tb1").find("tr").not("tr:eq(0)").remove();
                $.each(list,function(i,product){
                    var tr = $("<tr align='center'></tr>");
                    var td1 = $("<td>"+product.productId+"</td>");
                    var td2 = $("<td>"+product.productName+"</td>");
                    var td3 = $("<td>"+product.productType+"</td>");
                    var td4 = $("<td>"+product.productPrice+"</td>");
                    var td5 = $("<td>"+product.productCount+"</td>");
                    var td6 = $("<td>"+product.productImage+"</td>");
                    var td7 = $("<td>"+product.productDate+"</td>");
                    var td8 = $("<td>"+product.productDesc+"</td>");
                    var td9 = $("<td>"+product.productSale+"</td>");
                    var td10 = $("<td><input type='checkbox' class='status'></td>");
                    var td11 = $("<td><span class='del'>删除</span> <span class='update'>修改</span> </td>");
                    td10.find(".status").prop("checked",product.productStatus==1?true:false);
                    tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6)
                        .append(td7).append(td8).append(td9).append(td10).append(td11);
                    $("#tb1").find("tbody").append(tr);
                })
            }
        })
    }

    /**
     * 加载商品类型到下拉框
     */
    function loadType() {
        $.ajax("productType.do", {
            type: "post",
            dataType: "json",
            success: function (arr) {
                $.each(arr, function (i, pt) {
                    var option = $("<option value='" + pt.typeName + "'>" + pt.typeName + "</option>");
                    $("#sel").append(option);
                })
            }
        })
    }

    /**
     * 网页加载
     */
    function load(){
        loadProduct();
        loadType();
    }

    /**
     * 删除商品
     */
    $("#tb1").on("click",".del",function(){
        if(confirm("您确定要删除吗"))
        {
            var del = $(this);
            var productId = del.closest("tr").find("td:eq(0)").text();
            $.ajax("delProduct.do", {
                type: "post",
                data: {
                    productId: productId
                },
                success: function (data) {
                    if (data == "删除成功") {
                        alert("删除成功");
                        del.closest("tr").remove();
                    } else {
                        console.log("删除失败");
                    }
                }
            })
        }
    })

    /**
     * 添加商品
     */
    $("#btnAddUpdate").click(function(){
        if($(this).text() === "添加"){
            AddUpdate("addProduct.do");
        }else{
            AddUpdate("updateProduct.do");
        }
    });

    /**
     * 还原表单
     */
    function clearForm(){
        $("#tb2 #title").text("商品添加");
        $("#btnAddUpdate").text("添加");
        $("#tb2 input:eq(0)").prop("disabled",false);
        $("#tb2 input,textarea").not("input[type='button']").val("");
        $("#sel option:eq(0)").prop("selected",true);
        $("input[name='product_status']:eq(0)").prop("checked",true);

    }

    /**
     * 双击表单显示添加商品
     */
    $("#tb2").dblclick(function(){
        clearForm();
    });

    /**
     * 将商品信息回显到表单
     */
    $("#tb1").on("click",".update",function(){
        $("#tb2 #title").text("商品修改");
        $("#btnAddUpdate").text("修改");
        var tds = $(this).closest("tr").find("td");
        var productId = tds.eq(0).text();
        var productName = tds.eq(1).text();
        var productType = tds.eq(2).text();
        var productPrice = tds.eq(3).text();
        var productCount = tds.eq(4).text();
        var productImage = tds.eq(5).text();
        var productDate = tds.eq(6).text();
        var productDesc = tds.eq(7).text();
        var productSale = tds.eq(8).text();
        $("#product_id").val(productId).prop("disabled",true);
        $("#product_name").val(productName);
        $("#product_price").val(productPrice);
        $("#sel option:selected").val(productType);
        $("#product_count").val(productCount);
        $("#product_image").val(productImage);
        $("#product_date").val(productDate);
        $("#product_desc").val(productDesc);
        $("#product_sale").val(productSale);
        $("#sel option").filter(function(){
            return $(this).text() == productType
        }).prop("selected",true);
        var status = tds.eq(9).find("input").prop("checked")==true?true:false;
        if (status){
            $("#yes").prop("checked",true);
        }else{
            $("#no").prop("checked",true);
        }
    })

    /**
     * 将表单数据传递到服务器 servvar
     * @param url 服务器 servvar
     * @constructor
     */
    function AddUpdate(url){
        var option = $("#sel option:selected").val();
        if(option=="-请选择类型-"){
            alert("请选择商品类型");
            return;
        };
        if($("#product_id").val()==""||$("#product_name").val()==""||
            $("#product_price").val()==""||$("#product_count").val()==""||
            $("#product_image").val()==""||$("#product_date").val()==""||
            $("#product_desc").val()==""|| $("#product_sale").val()==""){
            alert("请填写完整商品信息！");
            return;
        }
        var status = $("input[name='product_status']:eq(0)").prop("checked") == true ? 1 : 0;
        $.ajax(url,{
            type:"post",
            data:{
                productId:$("#product_id").val(),
                productName:$("#product_name").val(),
                productType:option,
                productPrice:$("#product_price").val(),
                productCount:$("#product_count").val(),
                productImage:$("#product_image").val(),
                productDate:$("#product_date").val(),
                productDesc:$("#product_desc").val(),
                productSale:$("#product_sale").val(),
                productStatus:status,
            },
            success:function (data){
                if (data=="1"){
                    if(url=="updateProduct.do"){
                        alert("修改商品成功");
                    }else if(url=="addProduct.do"){
                        alert("添加商品成功");
                    }
                    loadProduct();
                    clearForm();
                }
            }
        })
    }
    load();
</script>
</body>
</html>